<template>
  <div class="Panel-container">
    <img class="Panel-image" src="@/resource/Images/UB.png">
  </div>

  <div class="about">
    <div class="container">
      <div class="author" v-for="user in users" :key="user.name">
        <UserProfileCard
            :profileData="user"
            :showFollowButton="true"
        />
      </div>

    </div>
  </div>


</template>

<script setup>
import UserProfileCard from '@/components/AboutComponents/AboutCardComp.vue';

const users = [
  {
    imageUrl: 'https://example.com/images/photo1.jpg',
    profilePicUrl: 'https://example.com/images/avatar1.jpg',
    name: '李明',
    jobTitle: '软件工程师',
    description: '如果你想成为一个好爸爸，你需要提升自己的形象。我认为我们需要为你塑造的形象是“反省但进步中的”。'
  },
  {
    imageUrl: 'https://example.com/images/photo2.jpg',
    profilePicUrl: 'https://example.com/images/avatar2.jpg',
    name: '张华',
    jobTitle: '教师',
    description: '如果你想保持作为爸爸的身份，你需要改善自己的公众形象。我认为你需要展现的形象是“已经认识到错误，正在学习改进的”。'
  },
  {
    imageUrl: 'https://example.com/images/photo3.jpg',
    profilePicUrl: 'https://example.com/images/avatar3.jpg',
    name: '王强',
    jobTitle: '设计师',
    description: '如果你想继续做爸爸，你需要改进自己的形象。我认为我们可以为你打造一个“已知错就改，不断学习”的形象。'
  },
  {
    imageUrl: 'https://example.com/images/photo4.jpg',
    profilePicUrl: 'https://example.com/images/avatar4.jpg',
    name: '赵丽',
    jobTitle: '项目经理',
    description: '如果你想成为一名更好的爸爸，你需要对自己的形象进行调整。我认为你需要呈现“已经认识到错误，并且在不断学习”的形象。'
  }
];

</script>

<style scoped lang="scss">
@use"@/styles/color-var-prim" as prim;               // 修正混合命名，去掉开头的点
@mixin flex {
  display: flex;
  justify-content: center;
  align-items: center;
}

.author {
  display: flex;
  justify-content: space-around;
  padding: 20px;
}

.about {
  @include flex;
}

.container {
  margin-top: 10%;
  @include flex;
  // 如果这里需要添加样式，可以继续在这里写
}
.Panel-container{
  width: 100%;
  height: 35vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: prim.$rgba-primary-light;
  .Panel-image{
    background-color: prim.$rgba-primary-light;
  }
}
</style>